import VueRouter from "vue-router";
import indexLayout from "@/layout/index";  //布局首页
import slotAndref from "@/views/slotAndref"; // 插槽和ref练习
import dynamicComponent from "@/views/DynamicComponent"; //动态组件练习
import attributeExercise from "@/views/attributeExercise"; //属性和方法练习
import globalEventBus from "@/views/globalEventBus"; //全局事件总线练习
import vuexExercise from "@/views/vuexExercise"; //vuex练习
import pageStyleExercise from "@/views/pageStyleExercise"; //页面样式练习
import myselfEvent from "@/views/myselfEvent"; //自定义事件练习
import messageSubAndPub from "@/views/messageSubAndPub"; //消息订阅发布练习
import routeGuardExercise from "@/views/routerGuardExercise"; //路由守卫练习
import routeGuardLogin from "@/views/routerGuardExercise/components/Login";//登录练习
export default new VueRouter({
    mode:"history",
    routes:[
        //重定向
        {
            path:'/',
            redirect:'/indexLayout'  
        },
        //页面首页
        {
            path:'/indexLayout',
            name:"indexLayout",
            component:indexLayout 
        },
        // 插槽和ref练习
        { 
            path:'/slotAndref',
            name:'slotAndref',
            component:slotAndref,
        children:((pre)=>[
            {
                path:"/slotAndref/index",
                name:`${pre}-index`,
            }
        ])('slotAndref')
        },
       // 动态组件练习
       { 
        path:'/dynamicComponent',
        name:'dynamicComponent',
        component:dynamicComponent,
    },
    // 属性和方法练习
    { 
        path:'/attributeExercise',
        name:'attributeExercise',
        component:attributeExercise,
    },
    //全局事件总线练习
    {
        path:'/globalEventBus',
        name:'globalEventBus',
        component:globalEventBus,
    },
    //vuex练习
    {
        path:'/vuexExercise',
        name:'vuexExercise',
        component:vuexExercise,
    },
    //页面样式练习
    {
        path:'/pageStyleExercise',
        name:'pageStyleExercise',
        component:pageStyleExercise,
    },
    //自定义事件练习
    {
        path:'/myselfEvent',
        name:'myselfEvent',
        component:myselfEvent,
    },
    //消息订阅发布练习
    {
        path:'/messageSubAndPub',
        name:'messageSubAndPub',
        component:messageSubAndPub,
    },
    //路由守卫练习
    {
        path:'/routeGuardExercise',
        name:'routeGuardExercise',
        component:routeGuardExercise,
        children:((pre)=>[
            {
                path:"Login",
                name:`${pre}-Login`,
                component: () => import('@/views/routerGuardExercise/components/Login.vue'),
              // component:routeGuardLogin,
            },
            {
                path:"Code",
                name:`${pre}-Code`,
                component: () => import('@/views/routerGuardExercise/components/Code.vue'),
            }
        ])('routeGuardExercise')
    },
    ]
})